<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/vaadin-material-theme/vaadin-grid.html">
<link rel="import" href="../../bower_components/vaadin-material-theme/vaadin-grid-sorter.html">
<link rel="import" href="../../bower_components/vaadin-material-theme/vaadin-grid-filter.html">
<link rel="import" href="../view-app.html">
<link rel="import" href="../style/shared-styles.html">
<dom-module id="view-track-warehouse">
    <template>
        <style include="shared-styles app-grid-style">
            :host {
                margin: 10px;
                display: block;
                --app-grid-columns: 1;
                --app-grid-item-height: 50%;
            }

            h1.title {
                text-align: center;
                margin: 20px 0 30px 0;
                font-size: 1.75rem;
            }

            .btn {
                margin: 20px 0 0 0;
                width: 300px;
            }
        </style>
        <firebase-auth app-name="smart-mes" id="auth" user="{{user}}"></firebase-auth>
        <firebase-document app-name="smart-mes" id="userData" path="/user/[[user.uid]]" data="{{k}}"></firebase-document>
        <firebase-query app-name="smart-mes" id="orderQuery" path="/data/[[k.key]]/orderData" order-by-child="order_no" data="{{orderItems}}"></firebase-query>
        <firebase-query app-name="smart-mes" id="warehouseQuery" path="/data/[[k.key]]/warehouseData" data="{{warehouseItems}}"></firebase-query>
        <app-localstorage-document key="app-lang" data="{{language}}"></app-localstorage-document>
        <ul class="app-grid">
            <li>
                <div class="card">
                    <h1 class="title">Completed Orders Warehouse</h1>

                    <vaadin-grid id="warehouseTable" items="[[warehouseItems]]" size="100">
                        <vaadin-grid-column flex="1">
                            <template class="header">
                                <vaadin-grid-sorter path="order_no">
                                    <div class="cell">{{localize('order-number')}}</div>
                                </vaadin-grid-sorter>
                            </template>
                            <template>
                                <div class="cell">[[item.order_no]]</div>
                            </template>
                        </vaadin-grid-column>
                        <vaadin-grid-column flex="1">
                            <template class="header">
                                <vaadin-grid-sorter path="order_status">
                                    <div class="cell">{{localize('color')}}</div>
                                </vaadin-grid-sorter>
                            </template>
                            <template>
                                <div class="cell" style$="color:[[item.order_color]]">&#9608</div>
                            </template>
                        </vaadin-grid-column>
                        <vaadin-grid-column flex="1">
                            <template class="header">
                                <vaadin-grid-sorter path="order_customer">
                                    <div class="cell">
                                        <span>{{localize('customer')}}</span>
                                    </div>
                                </vaadin-grid-sorter>
                            </template>
                            <template>
                                <div class="cell">[[item.order_customer]]</div>
                            </template>
                        </vaadin-grid-column>
                        <vaadin-grid-column flex="1">
                            <template class="header">
                                <vaadin-grid-sorter path="order_delivery">
                                    <div class="cell">
                                        <span>{{localize('delivery-date')}}</span>
                                    </div>
                                </vaadin-grid-sorter>
                            </template>
                            <template>
                                <div class="cell">[[getDeliveryDate(item.order_delivery)]]</div>
                            </template>
                        </vaadin-grid-column>
                        <vaadin-grid-column flex="1">
                            <template class="header">
                                <vaadin-grid-sorter path="order_product">
                                    <div class="cell">
                                        <span>{{localize('product')}}</span>
                                    </div>
                                </vaadin-grid-sorter>
                            </template>
                            <template>
                                <div class="cell">[[item.order_product]]</div>
                            </template>
                        </vaadin-grid-column>
                        <vaadin-grid-column flex="1">
                            <template class="header">
                                <vaadin-grid-sorter path="order_quantity">
                                    <div class="cell">
                                        <span>{{localize('quantity')}}</span>
                                    </div>
                                </vaadin-grid-sorter>
                            </template>
                            <template>
                                <div class="cell">[[item.order_quantity]]</div>
                            </template>
                        </vaadin-grid-column>
                        <vaadin-grid-column flex="1">
                            <template class="header">
                                <vaadin-grid-sorter path="order_quantity">
                                    <div class="cell">
                                        <span>{{localize('defect')}}</span>
                                    </div>
                                </vaadin-grid-sorter>
                            </template>
                            <template>
                                <div class="cell">[[item.order_defect]]</div>
                            </template>
                        </vaadin-grid-column>
                        <vaadin-grid-column flex-grow="2" flex="1">
                            <template class="header">
                                <vaadin-grid-sorter path="order_duration">
                                    <div class="cell">Plan {{localize('duration')}}</div>
                                </vaadin-grid-sorter>
                            </template>
                            <template>
                                <div class="cell">[[getOrderDuration(item.plan_duration)]]</div>
                            </template>
                        </vaadin-grid-column>
                        <vaadin-grid-column flex-grow="2" flex="1">
                            <template class="header">
                                <vaadin-grid-sorter path="order_delivery">
                                    <div class="cell">Actual {{localize('duration')}}</div>
                                </vaadin-grid-sorter>
                            </template>
                            <template>
                                <div class="cell">[[getOrderDuration(item.actual_duration)]]</div>
                            </template>
                        </vaadin-grid-column>
                        <vaadin-grid-column flex="1">
                            <template class="header">
                                <div class="cell numeric last">{{localize('delete')}}</div>
                            </template>
                            <template>
                                <div class="cell numeric last">
                                    <paper-icon-button on-click="deleteItem" item="[[item]]" icon="vaadin:close-small" title="Delete"></paper-icon-button>
                                </div>
                            </template>
                        </vaadin-grid-column>
                    </vaadin-grid>
                    <div class="center">
                        <paper-button class="btn" on-click="clearWarehouse">
                            Clear Warehouse
                        </paper-button>
                    </div>
                </div>
            </li>
        </ul>
        <paper-toast id="toastAlert" always-on-top horizontal-align="right">{{localize(toastText)}}</paper-toast>
    </template>
    <script>
        /**
         * @ViewTrackWarehouse
         * @polymer 
         * @extends {Polymer.Element}
         * @polymerBehavior Polymer.AppLocalizeBehavior
         */
        class ViewTrackWarehouse extends Polymer.mixinBehaviors([Polymer.AppLocalizeBehavior],
            Polymer.Element) {
            static get is() {
                return 'view-track-warehouse'
            }

            static get properties() {
                return {
                    language: String,
                    orderHistoryData: Object,
                    orderItems: Object,
                    warehouseItems: Object,
                    toastText: String,
                    selectAll: Object
                }
            }
            connectedCallback() {
                super.connectedCallback()
                this.loadResources(this.resolveUrl('../../data/locales.json'))
            }

            getOrderDuration(order_duration) {
                if (!order_duration) return 0
                return this._secondsToHms(order_duration)
            }

            getTimestampToDate(timestamp) {
                const today = new Date(timestamp * 1000);
                let dd = today.getDate()
                let mm = today.getMonth() + 1
                let yyyy = today.getFullYear()
                if (dd < 10) {
                    dd = '0' + dd
                }
                if (mm < 10) {
                    mm = '0' + mm
                }
                return Array.of(dd, mm, yyyy)
            }

            getDeliveryDate(timestamp) {
                let date = this.getTimestampToDate(timestamp)
                return date[0] + '/' + date[1] + '/' + date[2];
            }

            _secondsToHms(sec) {
                sec = Number(sec)
                const h = Math.floor(sec / 3600)
                const m = Math.floor(sec % 3600 / 60)
                const s = Math.floor(sec % 3600 % 60)
                return ('0' + h).slice(-2) + ":" + ('0' + m).slice(-2) + ":" + ('0' + s).slice(-2)
            }

            deleteItem(e) {
                if (confirm("Delete this item ?")) {
                    let key = e.currentTarget.item.$key
                    this.$.warehouseQuery.ref.child(key).remove()
                    this.toastText = 'notification-delete-successfully'
                    sthis.$.toastAlert.open()
                }
            }

            clearWarehouse() {
                if (confirm("Are you sure do you want to clear warehouse product ?") == true) {
                    this.$.warehouseQuery.ref.remove()
                    this.toastText = "notification-delete-successfully"
                    this.$.toastAlert.open()
                }
            }
        }
        customElements.define(ViewTrackWarehouse.is, ViewTrackWarehouse)
    </script>
</dom-module>